<template>
    <!-- 任务管理页面的内容 -->
    <view style="background-color: white;">
        <!-- 任务管理相关的列表、搜索框等 -->
        <view class="task-option-list">
            <button class="task-option" v-for="(item, index) in taskOptions" :key="index" @click="handleTaskOptionClick(item, index)">
                <image :src="userOptions[index].avatar" style="width: 30px; height: 30px; border-radius: 50%; display: inline-block; margin-right: 5px;" />
                {{ item }}
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 任务管理页面的数据
            taskOptions: ['小灰', '小蓝', '小红'],
            // 假设对应的页面路径，你需要根据实际情况修改
            pagePaths: [
                '/pages/userTask/userTask',
                '/pages/userAtask/userAtask',
                '/pages/userNewtask/userNewtask'
            ],
            userOptions: [
                {
                    username: '小灰',
                    avatar: '/static/images/user01.jpg'
                },
                {
                    username: '小蓝',
                    avatar: '/static/images/user02.png'
                },
                {
                    username: '小红',
                    avatar: '/static/images/user03.jpg'
                }
            ]
        };
    },
    onLoad() {
        // 任务管理页面的初始化逻辑
    },
    methods: {
        // 任务管理页面的方法
        handleTaskOptionClick(option, index) {
            console.log(`点击了${option}`);
            // 跳转到私聊页面并传递用户信息
            uni.navigateTo({
                url: `/pages/privateChat/privateChat?username=${option}&avatar=${this.userOptions[index].avatar}`
            });
        }
    }
};
</script>

<style>
/* 任务管理页面的样式 */
.task-option-list {
    display: flex;
    flex-direction: column;
}
.task-option {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    cursor: pointer;
    background-color: white; 
    color: black;
    border-radius: 5px; 
    text-align: left; /* 让按钮内文本左对齐 */
}
</style>    